<template>
  <div class="user">
    <!--新增或更新对话框-->
    <el-dialog :title="opeType === 'add'?'新增用户':'更新用户'" :visible.sync="isShow">
      <AUForm ref="form"></AUForm>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setIsShow(false)">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>

    <!--搜索区域-->
    <div class="user-header">
      <!--新增用户-->
      <el-button type="primary" @click="addUser">+ 新增</el-button>
      <!--搜索用户-->
      <SearchForm ref="form" :keyword="keyword" @submit="getList"></SearchForm>
    </div>

    <!--表格区域-->
    <CommonTable
        :Pdata="tableData"
        :Plabel="tableLabel"
        :Pconfig="tableConfig"
        @changePage="changePage"
        @edit="editUser"
        @del="delUser"
    ></CommonTable>
  </div>
</template>

<script>
import CommonTable from "@/components/CommonTable";
import AUForm from "../../components/AUForm";
import SearchForm from "../../components/SearchForm";
import {delUser, getUser} from "@/http/data";
import {mapMutations, mapState} from "vuex";

export default {
  name: "User",
  components: {
    CommonTable, AUForm, SearchForm
  },
  data() {
    return {
      tableData: [],
      tableLabel: [
        {
          prop: 'name',
          label: '姓名',
        },
        {
          prop: 'age',
          label: '年龄',
        },
        {
          prop: 'sex',
          label: '性别',
        },
        {
          prop: 'birth',
          label: '生日',
          width: 200
        },
        {
          prop: 'addr',
          label: '地址',
          width: 320
        },
      ],
      tableConfig: {
        page: 1, //当前页数
        total: 30, //表格数据个数，这个只是初始值
        pageSize: 20
      },
      keyword: ''
    }
  },
  computed: {
    ...mapState('addOrUpdate', {
      opeType: 'opeType',
      AUData: 'data'
    }),
    isShow: {  /*让isShow可以直接赋值*/
      get() {
        return this.$store.state.addOrUpdate.isShow
      },
      set(val) {
        this.$store.commit('addOrUpdate/setIsShow', val)
      }
    }
  },
  methods: {
    ...mapMutations('addOrUpdate', ['setIsShow', 'setOpeType', 'setData']),
    // 添加或编辑的提交事件
    confirm() {
      if (this.opeType === 'add') {
        this.$http.post('/user/add', this.AUData).then(() => {
          this.isShow = false
        })
      } else if (this.opeType === 'edit') {
        this.$http.post('/user/edit', this.AUData).then(() => {
          this.isShow = false
        })
      }
      this.getList() /*刷新*/
    },
    // 添加用户事件
    addUser() {
      this.isShow = true
      this.setOpeType('add')
    },
    // 改变页码
    changePage(page) {
      this.tableConfig.page = page
      this.getList(this.$refs.form.keyword)
    },
    // 通过关键词和页码重新请求数据
    getList(keyword = '') {
      this.tableConfig.loading = true
      keyword ? (this.tableConfig.page = 1) : ''
      getUser({
        page: this.tableConfig.page,
        name: keyword
      }).then(({data}) => { //TODO 数据不准确，有延时性
        this.tableData = data.list.map(item => {
          item.sex = (item.sex === 0 ? '男' : '女')
          return item
        })
        this.tableConfig.total = data.count
        this.tableConfig.loading = false
      })
    },
    // 编辑数据
    editUser(row) {
      this.setData(JSON.parse(JSON.stringify(row))) /*拷贝对象*/
      this.setOpeType('edit')
      this.isShow = true
    },
    // 删除
    delUser(row) {
      this.$confirm('此操作将永久删除该文件，是否继续？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(delUser({
        id: row.id
      })).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.getList()
      })
    }
  },
  created() {
    this.getList()
  },
}
</script>

<style scoped>
.user {
  height: 100%;
}

.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
